<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>注册用户检测</title>
</head>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.js"></script>
<body>
<div id="app">
    用户：<input type="text" name="username" @blur="isEqual()" id="username" v-model="username">
    <span v-if="isShow" style="color: red">用户名重复!</span>
    </br>
    密码：<input type="password" name="username" id="password">
    </br>
    <input type="submit" value="注册" :disabled="isShow">


</div>
</body>
</html>
<script>
    const vm = new Vue({
            el: '#app',
            data: {
                isShow: false,
                username: '',
                users: null
            },
            methods: {
                getData() {
                    axios.get('data.json')
                        .then(function (res) {
                            vm.users = res.data;
                            console.log(this.data)
                        })
                        .catch(function (err) {
                            console.log(err)
                        })
                },
                isEqual() {
                    this.isShow = false
                    if (this.users.length > 0) {
                        this.users.forEach(e => {
                            if (e.username === this.username) {
                                this.isShow = true
                            }
                        })
                    }

                }

            },
            mounted() {
                this.getData()
            }

        },
    )
</script>
